import Taro, { Component } from '@tarojs/taro'
import { View, Text, Picker,Image ,Input} from '@tarojs/components'
import './howToPhotograph.css'
import { AtAvatar, AtList, AtInput, AtButton} from "taro-ui"
import app from '../../main';

export default class HowToPhotograph extends Component {

    config = {
        navigationBarTitleText: '如何拍摄眼睛',
        navigationBarBackgroundColor: "#000000",
        navigationBarTextStyle: "white",
    }
    constructor () { 
        super(...arguments); 
        this.state = {
            style:'font-size:15px;color:white;',
            onetwothree: 'https://experts.bayou-tech.cn/img/imgs/onetwothree.png',
            face: 'https://experts.bayou-tech.cn/img/imgs/face.png'
        }
    }

    //跳转到拍照
    gotoPhotograph(){
        if(this.$router.params.id == 10){
            app.redirectTo('../Photograph/Photograph?id='+ '10')
        }else if(this.$router.params.id == 20){
            app.redirectTo('../Photograph/Photograph?id='+ '20')
        }else{
            app.redirectTo('../Photograph/Photograph')
        }
    }

    componentWillMount () {
      console.log(2)
      console.log('id2',this.$router.params.id)
    }

    render () {
      return (
        <View className='index'>

            <View className='text'>如何拍摄您的眼睛？</View>

            <View className='imgBox'>
                <Image className='img' src={this.state.onetwothree} />
            </View>

            <View className='box'>
              <View className='one'>
                  <View style={this.state.style}>摘掉眼镜，平视摄像头，正脸面对镜头</View>
              </View>

              <View className='two'>
                  <View style={this.state.style}>调整与镜头的距离,使人脸尽量完整的填完整个大方框,眼睛要正视前方，并且要睁大</View>
              </View>
              <Image  className='face' src={this.state.face} />

              <View className='three'>
                  <View style={this.state.style}>按下拍照键，手机闪光后拍照</View>
              </View>
            </View>

            <View className='empty'></View>

            <View className='btnBox'>
              <AtButton className='btn' onClick={this.gotoPhotograph.bind(this)}>开始</AtButton>
            </View>

        </View>
      )
    }
  }
  
  